<script setup lang="ts">
import { defineAsyncComponent, watch } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { convertStringToNumber } from "@visual/utils";
import Ball from "@visual/assets/icon/ball.svg?component";
import ReTextTooltip from "../../../components/ReTextTooltip";
defineOptions({
  name: "waterStat"
});
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      iconName?: string;
    };
  }>(),
  {
    propValue: () => ({
      iconName: "",
      contentList: [],
      title: ""
    })
  }
);
let compArr = ["humidity", "methane", "temperature"];
const imgMap = {};
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/${compArr[i]}.svg?component`));

  imgMap[compArr[i]] = comp;
}
const classes = (type: number) => {
  return {
    "list-item-content-normal": true
  };
};
watch(
  () => props.propValue.contentList,
  val => {
    if (val) {
      console.log(val);
    }
  }
);
</script>

<template>
  <leftCompWrapper :title="props.propValue.title" :iconName="propValue.iconName">
    <px-scrollbar wrap-class="list-warpper">
      <div v-for="(item, index) in props?.propValue.contentList" :key="item.type ? item.type : index" class="list-item">
        <div class="list-item-title">{{ item.name }}</div>

        <template v-if="item.name.indexOf('指标') == -1">
          <div v-if="item.attrs[0]?.value || item.attrs[0]?.value == 0" class="font-normal text-[20px]">
            <div class="list-item-val">
              <span :class="classes(item.attrs[0]?.status)">{{ convertStringToNumber(item.attrs[0]?.value) }}</span
              >{{ item.attrs[0]?.unit }}
            </div>
          </div>
          <div class="list-item-content">
            <div v-for="(member, i) in item.attrs" v-show="i > 0" :key="member.tagNum" class="list-item-content-item">
              <component :is="imgMap[member.icon]" class="list-icon" :class="classes(member.status)" />
              <div class="list-item-val-title">
                <div class="list-item-content-title">{{ member.title }}</div>
                <div class="list-item-content-val">
                  <span :class="classes(member.status)">{{ convertStringToNumber(member.value) }}</span
                  >{{ member.unit }}
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div
            v-for="(member, i) in item.attrs"
            :key="member.tagNum ? member.tagNum : i"
            class="border-dashed border-b-[1px] border-[#C6C6C6] list-item-content-stat"
          >
            <div class="w-[70%]">
              <ReTextTooltip :content="member.title" />
            </div>
            <div class="flex items-center content-center">
              <Ball
                v-if="['正常', '异常', '报警'].indexOf(member.value) !== -1"
                :class="{ 'text-[#10b981]': member.value === '正常', 'text-[#ef4444]': ['异常', '报警'].indexOf(member.value) !== -1 }"
              />
              <span :class="classes(member.status)">{{ convertStringToNumber(member.value) }}</span>
            </div>
          </div>
        </template>
      </div>
    </px-scrollbar>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
.list-warpper {
  display: flex;
  width: 100%;

  .list-icon {
    width: 30px;
    height: 34px;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 8px;

    .list-item-title {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      color: #000;

      &::before {
        display: inline-block;
        width: 3px;
        height: 16px;
        margin-right: 6px;
        vertical-align: middle;
        content: "";
        background: #3b82f6;
        border-radius: 0 100px 100px 0;
      }
    }

    .list-item-val {
      font-size: 18px;
      font-weight: 700;
    }

    .list-item-content {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      line-height: 17px;
      color: #000;

      .list-item-content-item {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: 50%;
        margin-bottom: 5px;

        .list-item-val-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: normal;

          .list-item-content-val {
            align-self: start;
            margin-top: 4px;
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }

    .list-item-content-error {
      color: #f87171;
    }

    .list-item-content-warn {
      color: #fbbf24;
    }

    .list-item-content-normal {
      color: #000;
    }
  }

  .list-item-content-stat {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 400;
    line-height: 23px;
    color: #000;
  }
}
</style>
